  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
  <canvas id="c1" width="600" height="400" style="width: 600px; height: 400px;"></canvas>
  <script>
    // 画布
    const canvas = document.getElementById('c1')
    // 画笔
    const ctx = canvas.getContext('2d')
    // 绘制矩形 位置x 位置y 宽 高
    let index = 0;
    let direction = true
    function render() {
      ctx.clearRect(0,0,600,400)
      if (direction) {
        index+=0.01
        if (index >= 0.99){
          direction = false
        }
      } else{
        index-=0.01
        if (index <= 0.01){
          direction = true
          index = 0
        }
      }
      let LinearGradient = ctx.createRadialGradient(300,200,0,300,200,100)
      LinearGradient.addColorStop(0,'red')
      LinearGradient.addColorStop(index,'pink')
      LinearGradient.addColorStop(1,'blue')
      ctx.fillStyle = LinearGradient
      ctx.fillRect(0,0,600,400)
      requestAnimationFrame(render)
    }
    requestAnimationFrame(render)
  </script>
  </body>
  </html>